<script src="@/js/wenhua/dizhi.js"></script>

<template>

  <div class="dizhi">
    <div class="margins">

      <!-- 面包屑导航 -->
      <el-affix :offset="80">
        <div class="navigation">
          <Breadcrumb separator=">">
            <BreadcrumbItem to="/">
              <Icon type="ios-home" />
              首页
            </BreadcrumbItem>
            <BreadcrumbItem to="/wenhua">
              <Icon type="logo-buffer" />
              文化
            </BreadcrumbItem>
            <BreadcrumbItem>
              <Icon type="md-pin" />
              地支
            </BreadcrumbItem>
          </Breadcrumb>
        </div>

        <!-- 猜你想看 -->
        <div class="prediction">
          猜你想看：
          <router-link to="/wenhua/tiangan">
            天干
            <Icon type="ios-open-outline" />
          </router-link>
        </div>

        <!-- 分割线 -->
        <div class="divider">
          <el-divider />
        </div>
      </el-affix>

      <!-- 数据 -->
      <div class="data">
        <el-row :gutter="10">
          <el-col :span="3">
            <el-affix :offset="125">
              <el-card shadow="never" class="left">
                <div>
                  <button class="introduce-button" @click="pageTable = 0">
                    基础介绍
                    <span v-show="pageTable === 0">
                      <Icon type="ios-arrow-dropright-circle" />
                    </span>
                  </button>
                </div>
                <br />
                <div>
                  <button class="details-button" @click="pageTable = 1">
                    详细解读
                    <span v-show="pageTable === 1">
                      <Icon type="ios-arrow-dropright-circle" />
                    </span>
                  </button>
                </div>
              </el-card>
            </el-affix>
          </el-col>
          <el-col :span="21">
            <el-card shadow="always" class="right">
              <div v-show="pageTable === 0" class="content">
                <div>
                  <el-tag size="large" round type="info" effect="dark">
                    <span>古文献参考</span>
                  </el-tag>
                </div>
                <div>
                  <div>
                    <b>《春秋命历序》</b>
                    中记载：“天地开辟，万物浑浑，无知无识。阴阳所凭，天体始于北极之野，地形起于昆仑之虚，日月五纬俱起牵牛。四万五千年，日月五纬一轮转。天皇出焉，号曰‘防五’，兄弟十三人继相治。乘风雨，夹日月以行。定天之象，法地之仪，作干支以定日月度，共治一万八千岁。天皇被迹在柱州昆仑山下。”。
                  </div>
                  <br />
                  <div>
                    <b>《三命通会》</b>
                    中记载：“夫干犹木之干，强而为阳；支犹木之枝，弱而为阴。昔盘古氏明天地之道，达阴阳之变为三才。首君以天地既分之后，先有天而后有地，由是气化而人生焉，故天皇氏一姓十三人，继盘古氏以治，是曰天灵淡泊，无为而俗自化，始制干支之名，以定岁之所在。”。
                  </div>
                </div>
                <br /><br />
                <div>
                  <el-tag size="large" round type="info" effect="dark">
                    <span>何谓地支？</span>
                  </el-tag>
                </div>
                <div>
                  地支
                  是指天干地支中的十二地支，是中国传统的一种文字记序符号，循环使用。分别为：<b><u>子、丑、寅、卯、辰、巳、午、未、申、酉、戌、亥</u></b>；天干地支共同组成了中国古代传统历法纪年。
                </div>
                <br /><br />
                <div>
                  <el-tag size="large" round type="info" effect="dark">
                    <span>地支的起源</span>
                  </el-tag>
                </div>
                <div>
                  <div>
                    古文献记载，前三皇之后，乃是中三皇。其首中天皇君，史书上说中天皇君兄弟十三人，号曰天灵，起于天灵山，发明天干、地支等，人推为皇。其余兄弟十二人带领部众各占一方，立国称皇，各传国一万八千年。天皇既老，闻西南岷山有后土夫人，生子十一人，以地为姓，长曰地铿。
                  </div>
                  <br />
                  <div>
                    地支的发明，以地皇十一人兄弟的名称命名，除长子地铿外，还有兄弟十人，后配以天皇十三兄弟的另外两人(阉茂、大洲献)为十二地支，即：<b><u>困顿、赤奋若、摄提格、单阏、执徐、大荒落、敦牂、协洽、涒滩、作噩、阉茂、大渊献</u></b>。
                  </div>
                </div>
                <br /><br />
                <div>
                  <el-tag size="large" round type="info" effect="dark">
                    <span>读音参考</span>
                  </el-tag>
                </div>
                <div>
                  困顿（kùn dùn）、赤奋若（chì fèn ruò）、摄提格（shè tí gé）、单阏（chán yān）、执徐（zhí xú）、大荒落（dà huāng luò）、
                  敦牂（dūn zāng）、协洽（xié qià）、涒滩（tūn tān）、作噩（zuò è）、阉茂（yān mào）、大渊献（dà yuān xiàn）
                </div>
              </div>
              <div v-show="pageTable === 1" class="content">
                <div>
                  <el-input clearable maxlength="3" show-word-limit v-model="queryData" style="width: 300px"
                    placeholder="请输入地支名称（如：子 或 困顿）">
                    <template #prefix>
                      <el-icon>
                        <Edit />
                      </el-icon>
                    </template>
                  </el-input>
                  <span>
                    &nbsp;
                    <Button icon="ios-search" @click="">搜索</Button>
                  </span>
                  <span class="page">
                    <el-pagination small background class="pageList" :pager-count="3" :page-sizes="[10, 30, 50, 70, 90]"
                      layout="total, sizes, prev, pager, next, jumper" :total="dataTotal" :current-page.sync="page"
                      :page-size="pageSize" @size-change="handleSizeChange" @current-change="handleCurrentChange">
                    </el-pagination>
                  </span>
                  <div class="divider">
                    <el-divider />
                  </div>
                </div>

                <div v-show="data && data.length !== 0">
                  <div v-for="item in data" :key="item" class="for">
                    <el-card shadow="hover">
                      <div class="name">【<b v-html="showDataMethod(item.name)"></b>】</div>
                      <div>
                        <b>别称： </b>
                        <span v-html="showDataMethod(item.bieCheng)"></span>
                      </div>
                      <div>
                        <b>含义：</b>
                        {{ item.meaning }}
                      </div>
                      <div>
                        <b>三合：</b>
                        {{ item.sanHe }}
                      </div>
                      <div>
                        <b>六合：</b>
                        {{ item.liuHe }}
                      </div>
                      <div>
                        <b>半合： </b>
                        <span v-if="null !== item.shengBanHe">
                          {{ item.shengBanHe }}
                          &nbsp;&nbsp;&nbsp;&nbsp;
                        </span>
                        <span v-if="null !== item.muBanHe">
                          {{ item.muBanHe }}
                        </span>
                      </div>
                      <div>
                        <b>相刑：</b>
                        {{ item.xiangXing }}
                      </div>
                      <div>
                        <b>相冲：</b>
                        {{ item.xiangChong }}
                      </div>
                      <div>
                        <b>相破：</b>
                        {{ item.xiangPo }}
                      </div>
                      <div>
                        <b>相害：</b>
                        {{ item.xiangHai }}
                      </div>
                      <div>
                        <b>三会：</b>
                        {{ item.sanHui }}
                      </div>
                      <div>
                        <b>藏干：</b>
                        {{ item.cangGan }}
                      </div>
                      <div>
                        <b>月令：</b>
                        {{ item.yueLing }}
                      </div>
                      <br />
                      <div>
                        <b>万物类象：</b>
                        <div class="leixiang">
                          <div v-for="lx in item.leiXiang.length" :key="lx">
                            {{ item.leiXiang.split("#")[lx] }}
                          </div>
                        </div>
                      </div>
                      <div class="index">
                        {{ item.id }}
                      </div>
                    </el-card>
                  </div>
                </div>
                <div v-show="data.length === 0" class="null">
                  暂无数据
                </div>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </div>

    </div>
  </div>

</template>

<style lang="less" scoped src="@/css/wenhua/dizhi.scss"></style>
